<style lang="scss" scoped>
  .header{
    .btnBox{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
        text-align: center;
        .music{
          flex: 1;
          img{
            width: 34px !important;
          }
        }
        .passTitle{
          flex: 1;
          img{
            width: 70px !important;
          }
        }
        .tip{
          flex: 1;
          img{
            width: 69px !important;
          }
        }
        span{
            margin: 0 0.5rem;
            position: relative;
            padding: 0.5rem 1rem;
            background-color: #ff00ff;
            border-radius: 0.4rem;
            color: white;
            i{
                position: absolute;
                right: -0.8rem;
                top: -0.8rem;
                width:1.6rem;
                height:1.6rem;
                line-height:1.6rem;
                border-radius: 0.8rem;
                background-color: red;
                color: white;
                text-align: center;
            }
        }
    }
    .text{
      text-align: center;
      font-size: 17px;
      font-weight: bold;
    }
    .popTipBox{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgba($color: #000000, $alpha: 0.8);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3000;
      .content{
        width:300px;
        height:180px;
        background-image:url("../../../assets/img/tipModel.png");
        background-size:100% 100%;
        position: relative;
        .tips{
          margin-top: 100px;
          color: white;
          text-align: center;
        }
        .close-icon{
          position: absolute;
          width: 2.6rem;
          height: 2.6rem;
          right: 0.7rem;
          top: 0.7rem;
          border-radius: 1.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 3002;
        }
      }
    }
    .popPassBox{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgba($color: #000000, $alpha: 0.8);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3000;
      .content{
        width:202px;
        height:202px;
        background-image:url("../../../assets/img/passModel.png");
        background-size:100% 100%;
        position: relative;
        .tips{
          margin-top: 9rem;
          color: white;
          text-align: center;
        }
      }
    }
    
    .shade{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgba($color: #000000, $alpha: 0.8);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3000;
      .model{
        // width:300px;
        // height:180px;
        // background-image:url("../../../assets/img/tipModel.png");
        // background-size:100% 100%;
        position: relative;
        background-color: white;
        width: 80%;
        height: auto;
        border: 3px solid #39A9FA;
        border-radius: 10px;
        padding: 13px 10px;
        .passallpic{
          width: 100%;
          margin: 0 auto;
          margin-top: 20px;
        }
        .valueLine{
          display: flex;
          align-items: center;
          margin-top: 26px;
          .icon{
            flex: 0 0 40px;
          }
          .inputbox{
            position: relative;
            flex: 1;
            box-sizing: border-box;
            .input{
              width: 100%;
              margin-left: 10px;
              height: 25px;
              border: 1px solid #FFA200;
              padding-left: 7px;
              box-sizing: border-box;
              &::-webkit-input-placeholder{
                  color:#FFA200;
              }
              &::-moz-placeholder{   /* Mozilla Firefox 19+ */
                  color:#FFA200;
              }
              &:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                  color:#FFA200;
              }
              &:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                  color:#FFA200;
              }
            }
          }
          .input{
            flex: 1;
            margin-left: 10px;
            height: 25px;
            border: 1px solid #FFA200;
            padding-left: 7px;
            box-sizing: border-box;
            &::-webkit-input-placeholder{
                color:#FFA200;
            }
            &::-moz-placeholder{   /* Mozilla Firefox 19+ */
                color:#FFA200;
            }
            &:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                color:#FFA200;
            }
            &:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                color:#FFA200;
            }
          }
        }
      }
    }
  }
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    80% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
.xuanzhun{
    animation: rotate 3s linear infinite;
}
@keyframes rotate{
    from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}
.ad_time{ padding:5px; position:absolute; top:10px; right:10px; color:#fff;background-color:red;
  border-radius: 15px;
  span{ font-weight:bold; color:#fff; padding:0 5px; font-size: 18px;}
}
.close{ position:absolute; top:8px; right:8px; padding:5px;}
</style>
      
<template>
  <div class="header">
    <div class="btnBox">
        <div class="music">
          <img class="xuanzhun" src="../../../assets/img/music.png" alt="">
        </div>
        <div class="passTitle">
          <img v-if="passInfo.ji==1" src="../../../assets/img/g1.png" alt="">
          <img v-if="passInfo.ji==2" src="../../../assets/img/g2.png" alt="">
          <img v-if="passInfo.ji==3" src="../../../assets/img/g3.png" alt="">
          <img v-if="passInfo.ji==4" src="../../../assets/img/g4.png" alt="">
          <img v-if="passInfo.ji==5" src="../../../assets/img/g5.png" alt="">
        </div>
        <div class="tip" @click="tipBtn">
          <img src="../../../assets/img/tip.png" alt="">
        </div>
    </div>
    <div class="text">{{passInfo.text}}</div>
    <transition name="bounce">
      <div class="popTipBox" v-if="showTipPop">
        <div class="content">
          <div class="tips margT-m fs-16">{{passInfo.tip}}</div>
          <span class="close-icon" @click="showTipPop = false"></span>
        </div>
      </div>
    </transition>
    <transition name="bounce">
      <div class="popPassBox" v-if="showPassPop">
        <div class="content">
          
        </div>
      </div>
    </transition>
    <van-popup v-model="showgg" position="bottom">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" style="width:100%"/>
        </van-swipe-item>
      </van-swipe>
      <div class="ad_time" v-if="!showCloseBtn"><span id="t">{{second}}</span></div>
      <van-icon name="clear" class="close" color="white" size="24px" @click="close" v-if="showCloseBtn"/>
    </van-popup>
  </div>
</template>

<script>
import { Icon } from 'vant';
import { mapState } from 'vuex';
import {myMixins} from "@/assets/js/mixins.js"
export default {
  mixins: [myMixins],
  components: {
    [Icon.name]: Icon
  },
  props: ['passInfo'],
  props:{
    passInfo: Object
  },
  computed: {
    ...mapState(['isPass','fivepass'])
  },
  data() {
    return {
      second:3,
      showCloseBtn:false,
      showTipPop:false,
      showPassPop:false,
      showInputPop:false,
      showPop:false,
      value: 0,
      showgg:false,
      images: [
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/f72595f5-7834-497b-ad3c-0fc098f9f220.jpg',
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/a5e1f2d2-3655-4d9b-843f-7f29a8a355f0.jpg',
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/6f5a1304-2614-493b-a206-c946a1c43a04.jpg',
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/ad092d08-d472-46a7-9899-c38ba8530773.jpg',
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/fb2e4e8a-8235-4006-8e10-c31b333e451e.jpg',
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/999168cc-4e6b-4a97-8cdb-44ec82d914eb.jpg',
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/1cb26d47-d25a-4da2-9329-907679dfc523.jpg'
      ],
    }
  },
  mounted () {
    // this.shareInit()
    this.shareHomePage()
    // const view = document.querySelector('.view')
    // if(view){
    //   this.overscroll();
    // }
    // document.body.addEventListener('touchmove', function(evt) {
    //     if(!evt._isScroller) {
    //         evt.preventDefault();
    //     }
    // });
  },
  watch: {
    isPass(newVal) {
      console.log("newVal",newVal)
      this.showPassPop = true
      let st = setTimeout(()=>{
        const ji = Number(this.passInfo.ji)
        console.log("ji",ji)
        console.log("this.fivepass[ji]",this.fivepass[ji])
        if(ji==5){
          //this.showInputPop = true
          this.$router.push('/pass')
        }else{
          const game = this.fivepass[ji]
          console.log("game",game)
          const url = `/${game}?ji=${ji+1}`
          console.log("url",url)
          this.$router.push(url)
        }
        
        clearTimeout(st)
      },1000)
    }
  },
  methods: {
    tipBtn() {
      this.showgg = true
      this.downTime()
    },
    close() {
      this.showgg = false
      this.showTipPop = true
      this.showCloseBtn = false
      this.second = 3
    },
    downTime() {
      let i = setInterval(()=>{
        this.second = this.second - 1
        if(this.second<=0){
          clearInterval(i)
          this.showCloseBtn = true
        }
      },1000)
    }
  }
}
</script>
